<template>
    <div class="detailsContainer">
        <div class="book-title">说明书</div>
        <div class="book-contain">
            <dl>
                <dt>药品名称</dt>
                <dd>{{product.proInfo.productName}}</dd>
            </dl>
            <dl>
                <dt>通用名称</dt>
                <dd>{{product.proInfo.commonTitle}}</dd>
            </dl>
            <dl>
                <dt>拼音全码</dt>
                <dd>{{product.proInfo.pinyinFullCode}}</dd>
            </dl>
            <dl>
                <dt>主要成分</dt>
                <dd>{{product.proInfo.productMainmaterial}}</dd>
            </dl>
            <dl>
                <dt>规格型号</dt>
                <dd>{{product.proInfo.packing}}</dd>
            </dl>
            <dl>
                <dt>用法用量</dt>
                <dd>{{product.proInfo.dosage}}</dd>
            </dl>
            <dl>
                <dt>不良反应</dt>
                <dd>{{product.proInfo.adverse}}</dd>
            </dl>
            <dl>
                <dt>有效期</dt>
                <dd>60月</dd>
            </dl>
            <dl>
                <dt>禁忌</dt>
                <dd>{{product.proInfo.taboo}}</dd>
            </dl>
            <dl>
                <dt>性状</dt>
                <dd>{{product.proInfo.characters}}</dd>
            </dl>
            <dl>
                <dt>适应症/功能主治</dt>
                <dd>{{product.proInfo.introduction}}</dd>
            </dl>
            <dl>
                <dt>批准文号</dt>
                <dd>{{product.proInfo.approvalNumber}}</dd>
            </dl>
            <dl>
                <dt>药物相互作用</dt>
                <dd>{{product.proInfo.drugInteractions}}</dd>
            </dl>
            <dl>
                <dt>贮藏</dt>
                <dd>{{product.proInfo.storage}}</dd>
            </dl>
            <dl>
                <dt>包装</dt>
                <dd>{{product.proInfo.packingProduct}}</dd>
            </dl>
            <dl>
                <dt>生产企业</dt>
                <dd>{{product.proInfo.manufacturer}}</dd>
            </dl>
        </div>
    </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
    computed: {
        ...mapState(['product'])
    }
}
</script>

<style lang="scss" scoped>
    .detailsContainer {
        font-size: 0.14rem;
        white-space: normal;
        .book-title {
            padding: .16rem .24rem;
            font-size: .14rem;
            position: relative;
            font-weight: 700;
            &::before {
                content: "";
                position: absolute;
                left: .12rem;
                width: 0.04rem;
                height: .16rem;
                background: #3fadff;
                top: 50%;
                transform: translateY(-50%);
                border-radius: 0.02rem;
            }
        }
        .book-contain {
            padding: 0 .12rem .12rem;
            dl {
                display: flex;
                align-items: center;
                border: 1px solid #eee;
                border-bottom: none;
                background: #f5f5f5;
                dt {
                    flex: 0 0 0.7rem;
                    width: 0.7rem;
                    color: #333;
                    padding: 0 .1rem;
                }
                dd {
                    border-left: 1px solid #eee;
                    padding: .1rem 0 .1rem .1rem;
                    flex: 1 auto;
                    word-break: break-all;
                    word-wrap: break-word;
                    color: #666;
                    background: #fff;
                    line-height: 1.3;
                }
            }
        }
    }
</style>
